<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
var eidInfo;
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

function getWifiInfo(){
	if(!navigator.onLine){
		alert('U bent offline');
		return;
	}
	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://localhost:8081/wifi', true);
	
	xhr.onload = function(e) {
	  if (this.status == 200) {
		  alert(this.responseText);
		  if(this.responseText == 'true'){
			  alert('Connected To Wifi');
		  }else{
			  alert('Connected To data network');
		  }
	  }
	};

	xhr.send();
	}
	

function getInfo(){
	document.getElementById('loader').innerHTML= '<img src="ajax-loader.gif"> Bezig met laden van gegevens...';
	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://localhost:8081/eid', true);
	
	xhr.onload = function(e) {
	  if (this.status == 200) {
		  var eidInfo = eval('(' + this.responseText + ')');
		  document.getElementById('loader').innerHTML='';
		  document.getElementById('data').innerHTML='FirstName:' + eidInfo.firstName + '<br>Name:' + eidInfo.name + '<br>zipcode:' + eidInfo.zipcode + '<br>city:' + eidInfo.city;
		  getPhoto();
	  }
	};

	xhr.send();
	}
	
function getPhoto(){
	document.getElementById('loader').innerHTML= '<img src="ajax-loader.gif"> Bezig met laden van foto...';
	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://localhost:8081/eid/photo', true);
	xhr.responseType = 'arraybuffer';
	
	xhr.onload = function(e) {
	  if (this.status == 200) {
		  var bb = new BlobBuilder();
		    bb.append(this.response); // Note: not xhr.responseText
		    var blob = bb.getBlob('image/jpeg');
		    
		  	var img = document.getElementById('x');
		    img.onload = function(e) {
		      window.webkitURL.revokeObjectURL(img.src); // Clean up after yourself.
		    };
		    img.src = window.webkitURL.createObjectURL(blob);
		    document.body.appendChild(img);
		    
	      document.getElementById('loader').innerHTML='';
	  }
	};

	xhr.send();
	}



</script>
<body>
<a onclick="getWifiInfo();">get wifi Info</a><br>
<a onclick="getInfo();">get eid Info</a><br>
<div id="loader"></div>
<div id="data"></div>
<img id="x">

</body>
</html>